<template>
  <!-- 无颜色变化地图，会展示数值 -->
  <div class="map_container">
    <div
      ref="mapContainer"
      id="mapContainer"
      style="width: 880px; height: 841px"
    ></div>
    <img class="map_img" src="@/assets/imgs/mapTP.png" alt="" />
    <div class="tipsSty">
      <img src="@/assets/imgs/electricity/tips.png" alt="" srcset="" />
      <span class="maxSty">高</span>
      <span class="minSty">低</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import frame from "@/assets/imgs/frame.png";

export default {
  name: "Sichuan3DMap",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const mapContainer = ref(null); // DOM 引用
    const chartInstance = ref(null); // 存储 ECharts 实例

    // 获取地图数据
    const getMapData = () => props.data.map((item) => {
      item.name = item.region;
      item.value = item.val;
      return item;
    });
    // 加载地图
    const loadMap = async () => {
      let baseStr = "";
      console.log(import.meta.env.MODE, "===");
      if (import.meta.env.MODE == "development") {
        baseStr = "";
      } else {
        baseStr = "/scdtyz";
      }
      const response = await fetch(baseStr + "/sichuan.json");
      if (!response.ok) {
        console.error("地图数据加载失败", response.statusText);
        return;
      }
      const mapData = await response.json();

      echarts.registerMap("sichuan", mapData);
      chartInstance.value = echarts.init(mapContainer.value);

      const option = {
        tooltip: {
          show: true,
          backgroundColor: "rgba(50, 50, 50, 0)",
          borderWidth: 0,
          trigger: "item",
          enterable: true,
          showContent: true,
          triggerOn: "mousemove",
          showDelay: 0,
          textStyle: { fontSize: 12 },
          padding: [0, 8],
          hideDelay: 10,
          confine: true,
          formatter: (o) =>
            o.data
              ? `<div class="map-hover-box">
                  <div class="map-hover-mov">
                    <h3>${o.name}</h3>
                    <img src="${frame}" style="width: 38px; height: 38px; margin-right: 5px;" />
                  </div>
                  <div class='map-hover-tips'>
                    <p><span>数据</span><span>${o.value || 0}</span></p>
                  </div>
                </div>`
              : "",
        },
        visualMap: {
          type: "piecewise",
          min: 0,
          max: 400,
          left: 26,
          bottom: 40,
          showLabel: true,
          inRange: {
            color: ["rgba(255, 255, 255, 1)", "rgba(175, 235, 55, 1)"],
          },
          outOfRange: {
            color: ["rgba(255, 255, 255, 1)"],
          },
          show: false,
        },
        series: [
          {
            type: "map",
            map: "sichuan",
            width: "730px",
            height: "680px",
            roam: false,
            regionHeight: 1,
            shading: "realistic",
            itemStyle: {
              color: "#fff",
              areaColor: "rgba(255, 255, 255, 0)", // 区域透明
              borderColor: "rgba(255, 255, 255, 0)", // 边界透明 none
            },
            emphasis: {
              disabled: true, // 将 disabled 设置为 false 以启用高亮
              label: {
                show: false,
                textStyle: { color: "#fff", fontSize: 16, fontWeight: "bold" },
              },
              itemStyle: {
                areaColor: "rgba(0, 0, 0, 0.3)", // 设置区域的高亮颜色
                borderColor: "rgba(255, 255, 255, 0.5)", // 边界颜色
              },
            },
            // 点击地图区域的样式
            select: {
              disabled: true,
              itemStyle: {
                areaColor: "rgba(0, 0, 0, 0)", // 设置区域的高亮颜色
                borderColor: "rgba(255, 255, 255, 0.5)", // 边界颜色
              },
              label: {
                show: false,
                textStyle: { color: "#fff", fontSize: 16, fontWeight: "bold" },
              },
            },
            label: {
              show: false,
              // formatter: (params) => `${params.name}`+(params.value?`${params.value}`:""),
              // formatter: (params) =>(params.value?`${params.value}`:""),
              offset:[10, 10],//偏移
              // rich: {
              //   icon: {
              //     height: 16,
              //     width: 22,
              //     align: "center",
              //     color: "#fff", // 图标颜色
              //     backgroundColor: { image: "/city.png" },
              //   },
              // },
              // textStyle: {
              //   color: "#fff",
              //   fontSize: 14,
              //   fontFamily: "阿里妈妈数黑体",
              //   backgroundColor:"#F7B99A",
              //   padding: [0, 5, 0, 5],
              // },
              // text_panzhihua: {
              //   color: "#fff",
              //   fontSize: 14,
              //   fontFamily: "MiSans-Medium",
              //   padding: [1, 0, 1, 70], // 特定 padding
              // },
              // formatter: (params) => {
              //   // 根据城市名称选择不同的 rich 文本
              //   const textStyle = params.name === '攀枝花市' ? 'text_panzhihua' : 'text';
              //   return `{icon|} {${textStyle}|${params.name}}`;
              // },
            },
            data: getMapData(),
          },
        ],
      };

      chartInstance.value.setOption(option);
      chartInstance.value.resize();
   
    };

    onMounted(() => {
      loadMap();
      window.addEventListener(
        "resize",
        () => chartInstance.value && chartInstance.value.resize()
      );
    });

    onUnmounted(() => {
      // 清除事件监听器
      window.removeEventListener("resize", chartInstance.value.resize());
    });

    return {
      mapContainer,
    };
  },
};
</script>

<style lang="scss" scoped>
.map_container {
  position: relative;
  left: 8%;
  top: -67px;
  #mapContainer {
    position: absolute;
    z-index: 9;
    top: -15px;
    left: -65px;
    transform: scale(0.97);
    background: url("../../../assets/imgs/electricity/map-bg.png") no-repeat center;
  }
  .map_img {
    position: absolute;
    z-index: 1;
    width: 880px;
    height: 841px;
    top: 30px;
    left: -60px;
  }
}
#mapContainer {
  width: 100%;
  height: 100%;
}
.tipsSty {
  position: absolute;
  bottom: -750px;
  left: 58px;
  span {
    color: #fff;
  }
  .maxSty {
    position: relative;
    top: -148px;
    left: 5px;
  }
  .minSty {
    position: relative;
    left: -10px;
  }
}
::v-deep .map-hover-box {
  background: url("../../../assets/imgs/k.png") no-repeat center;
  width: 200px;
  height: 85px;
  display: flex;
  flex-direction: row;
  .map-hover-mov {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h3 {
      margin: 0;
      padding-top: 6px;
      font-size: 16px;
      font-family: "优设标题";
      letter-spacing: 1px;
      background: linear-gradient(
        to bottom,
        #ffffff 0.68%,
        #d1fffc 50%,
        #b1fffa 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      text-align: center;
      display: inline-block;
    }
  }
  .map-hover-tips {
    width: 74%;
    font-family: "MiSans-Medium";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    p {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    p:nth-child(1),
    p:nth-child(2) {
      width: 30%;
    }
    p:nth-child(3) {
      width: 40%;
    }
    p:nth-child(2) {
      border: 0.8px dashed;
      border-image-slice: 1;
      border-image-source: linear-gradient(
        0deg,
        rgba(104, 255, 245, 0) 0%,
        #68fff5 50%,
        rgba(104, 255, 245, 0) 100%
      );
    }
    span:nth-child(1) {
      font-size: 14px;
      font-weight: 330;
      color: #fff;
    }
    span:nth-child(2) {
      font-size: 16px;
      font-weight: 520;
      color: #68fff5;
      margin-top: 5px;
    }
  }
}
</style>
